<!-- 系统账号 -->
<template>
<div class="container">
    <!-- 控件 -->
    <div class="controlBox">
        <el-button slot="reference" type="primary" @click="goToPage">+ 新增</el-button>
        <el-button slot="reference" type="primary">删除</el-button>
    </div>
    <!-- 搜索老人 -->
    <div>
        <el-form ref="form" :inline="true" :model="search" label-width="80px" size="mini">
            <el-form-item label="搜索区域">
                <el-input v-model="search.name" placeholder="请输入搜索内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getFind">搜 索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 列表 -->
    <el-table ref="multipleTable" :data="tableData" :header-cell-style="{ background: '#efefef' }" tooltip-effect="dark" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="区域名称" width="180" align="center" />
        <el-table-column prop="id" label="区域id" width="180" align="center" />
        <el-table-column prop="tours" label="巡逻时间" align="center" />
        <el-table-column prop="beds" label="关联房间" align="center" />
        <el-table-column fixed="right" label="操作" width="220" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">管理房间</el-button>
                <el-button type="text" style="color: #f56c6c" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="controlBox" style="margin-top: 20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>
</template>

<script>
import {
    getArea,
    getDistrict,
    delArea
} from "../../../../api/user.js";
export default {
    components: {},
    data() {
        return {
            centerDialogVisible: false,
            currentPage: 1, //  初始页
            pageSize: 10, //  每页的数据
            total: 0, //总数
            search: {
                id: "",
            },
            form: {
                AllowedOverTime: "",
                patrolTime: "",
                date1: "",
                date2: "",
                relevanceRoom: "",
                password: "",
                type: [],
                resource: "",
                desc: "",
            },
            tableData: [],
        };
    },
    computed: {},
    watch: {},
    created() {
        this.getdistrict();
    },
    mounted() {},
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {},
    methods: {
        submitForm(formpatrolTime) {
            this.$refs[formpatrolTime].validate((valid) => {
                if (valid) {
                    this.$message("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        goToPage() {
            this.$router.push({
                name: "addArea",
            });
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleEdit(index, row) {
            console.log(index, row);
            this.$router.push({
                path: "areaAmend",
                query: {
                    id: row.id,
                },
            });
        },
        //删除区域
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    delArea(row.id)
                        .then((res) => {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        })
                        .catch((err) => {
                            this.$message({
                                type: "info",
                                message: "删除失败",
                            });
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pageSize = 1;
            this.pageSize = size;
            this.getdistrict();
            console.log(this.pageSize); //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.getdistrict();
            console.log(this.currentPage); //点击第几页
        },
        //获取区域列表
        getdistrict() {
            getArea(this.currentPage, this.pageSize)
                .then((res) => {
                    this.tableData = res.data.rooms;
                    this.total = res.data.total;
                    console.log(this.tableData);
                })
                .catch((err) => {
                    // console.log(err);
                });
        },
        // 根据id进行区域搜索
        getFind() {
            getArea(this.currentPage, this.pageSize, this.search.name).then((res) => {
                console.log(res);
                this.tableData = res.data.rooms
                console.log(this.tableData);
                // }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;

    .controlBox {
        padding-bottom: 20px;
    }
}
</style>
